<template>
  <div class="upd">
    <el-container>
      <el-aside width="280px" style="height: 650px"><el-container>
        <el-header>网格员</el-header>
        <el-main>
          <el-menu class="name_main">

                <el-menu-item :index=ind v-for="(item,ind) in admin" @click="getName(item)">{{item}}</el-menu-item>

          </el-menu>
<!--          <div style="overflow-y: scroll;max-height: 650px">-->
<!--            <div v-for="item in admin" @click="getName(item.name)" style="padding: 10px;">-->
<!--              <el-button type="primary" plain round="">{{item.name}}</el-button>-->
<!--&lt;!&ndash;              <a style="font-size: 20px;text-decoration: none" ></a>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
        </el-main>
      </el-container>
      </el-aside>
      <el-main class="info-main">
        <div>

          <el-descriptions class="margin-top" title="" :column="2" :size="mini" border>
            <template slot="title">
              <div style="text-align: left;font-family:新宋体;height: 30px">
                <h1>网格员信息</h1>
              </div>
              <div style="text-align: left;position:relative;top: 0">
                <el-avatar class="avat" >
                  <img :src="form.netIcon">
                </el-avatar>
              </div>
            </template>

            <template slot="extra">
              <div style="position: relative;top: 60px;">
                <el-button type="primary" size="large" @click="dialogFormVisible = true">操作</el-button>
              </div>
            </template>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                账号
              </template>
              {{form.netAccount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-lock"></i>
                密码
              </template>
              <el-input  type="password" disabled="true" value="form.netPassword" ></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="fa fa-address-book-o" aria-hidden="false"></i>
                姓名
              </template>
              {{form.netName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                电话
              </template>
              {{form.netPhone}}
            </el-descriptions-item>
<!--            <el-descriptions-item>-->
<!--              <template slot="label">-->
<!--                <i class="el-icon-location-information"></i>-->
<!--                最近登录IP-->
<!--              </template>-->
<!--              {{form.login_ip}}-->
<!--            </el-descriptions-item>-->
          </el-descriptions>
         <div class="dia">
          <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="dialog">
<!--              <el-form-item label="密码" :label-width="formLabelWidth" >-->
<!--                <el-input v-model="dialog.password" autocomplete="off" :placeholder="this.form.password"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="dialog.netPassword" autocomplete="off" ></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="dialog.netName" autocomplete="off" :placeholder="this.form.netName"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="dialog.netPhone" autocomplete="off" :placeholder="this.form.netPhone"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" style="right: 40%">取消</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button type="primary" @click="updateDetail()">修改</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </el-dialog>
         </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import {getNetByName} from "@/api/admin_api";
import {getNetName} from "@/api/admin_api";
import {updateNet} from "@/api/admin_api";

export default {
  name: "admin-update",
  inject:['reload'],
  components: {
  },


  data(){
    return{
      admin:[
        // '网格员1号','网格员2号','网格员3号','网格员4号','网格员5号','网格员6号',
        // '网格员7号','网格员8号','网格员9号','网格员10号'
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        // netIcon:require('@/assets/网格员1号.jpg'),
        // netAccount:'2222@qq.com',
        // netPhone:'18212345678',
        // netName: '网格员1号',
        // netPassword:'123456',
      },
      dialog:{
        netAccount:'',
        netName: '',
        netPassword: '',
        netPhone:''
      },
      formLabelWidth: '120px',

    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    updateDetail(){
      this.dialog.netAccount = this.form.netAccount;
      updateNet(this.dialog).then(()=>{
      })
      this.dialogFormVisible = false;
      this.form.netPassword = this.dialog.netPassword;
      this.form.netPhone = this.dialog.netPhone;
      this.form.netName = this.dialog.netName;
      setTimeout(function (){
        getNetName().then((res)=>{
          this.admin = res.data.data;
        })
      },500)
      location.reload();
    },


    getName(name){
      getNetByName(name).then((res)=>{
        this.form = res.data.data;
      })
    }
  },
  created() {
    getNetName().then((res)=>{
      this.admin = res.data.data
      getNetByName(this.admin[0]).then((res)=>{
        this.form = res.data.data;
    })

    })
  }

}
</script>

<style>
.upd .el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.upd .el-aside {
  background-color: #D3DCE6;
  /*color: #333;*/
  text-align: center;
  /*line-height: 300px;*/
}

.upd .name_main {
  background-color: #D3DCE6;
}

.upd .info-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  /*line-height: 300px;*/
}
.upd body > .el-container {
  margin-bottom: 40px;
}

/*侧边栏连接样式*/
/*.upd a {*/
/*  color: #2c3e50;*/
/*}*/

/*.upd a:hover{*/
/*  color:  rgb(255, 208, 75);*/
/*}*/

/*头像*/
.upd .avat{
  width: 90px;
  height: 90px;
}

/*弹出框*/
.upd .dia .el-dialog__title{
  font-size: 25px;
  color: #8c939d;
}
.upd .el-dialog .el-form-item__label{
  font-size: 20px;
  color: #8c939d;
}


</style>